<template>
  <div>
    <el-container>
      <el-container>
        <el-aside style="width: 35%">
          <div class="block">
            <el-image src="proList.pic" style="width: 350px"/>
          </div>
        </el-aside>
        <el-main style="width: 60%">
          <el-form ref="form"  label-width="80px">
            <el-form-item label="商品名">
              <span style="margin-left: -600px">{{proList.name}}</span>
            </el-form-item>
            <el-form-item label="描述">
              <span style="margin-left: -600px">{{proList.description}}</span>
            </el-form-item>
            <el-form-item label="价格">
              <span style="margin-left: -600px">￥{{proList.price}}</span>
            </el-form-item>
            <el-form-item label="数量">
              <el-input-number v-model="num"
                               @change="handleChange" :min="1" :max="proList.stock">
              </el-input-number>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit"
                         style="background-color: darkorange;width: 30%;height: 50px">加入购物车</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>

    </el-container>

  </div>
</template>

<script>
export default {
  name: "ProMessage",
  data () {
    return {
      activeName: 'first',
      count: 0,
      proList: [],
      value: "",
      num: 1
    }
  },
  created() {
    this.getList();
  },
  methods: {
    handleChange(value) {
      console.log(value);
      this.num=value;
    },
    getList(){
      let param=new URLSearchParams();
      param.append("id",sessionStorage.getItem("proId"))
      this.$http.post("/front/proType/proList",param).then(data => {
        console.log(data)
        this.proList=data[0];
      })
    },
    onSubmit(){
      let param=new URLSearchParams();
      // param.append("address",this.value);
      param.append("price",this.proList.price);
      param.append("id",this.proList.id);
      param.append("user_id",sessionStorage.getItem("user_id"));
      param.append("name",this.proList.name);
      param.append("num",this.num);
      if (sessionStorage.getItem("token")!=undefined){
          this.$http.post("/front/cart/addCart",param).then(data => {
            // console.log(data);
            if (data){
              this.$message({
                type: 'success',
                message: '添加成功'
              });
            }else {
              this.$message({
                type: 'error',
                message: '添加失败'
              });
            }
          })
      }else {
        this.$confirm('请先登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login");
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
        });
      }
    },
    // handleClick(tab, event) {
    //   console.log(tab, event);
    // },
    load () {
      this.count += 2
    }
  }
}
</script>

<style scoped>

.inputDeep>>>.el-input__inner {
  border: 0;
  resize: none;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}


</style>
